<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">hello vue</h2>
        <h5 v-if="a==true">haha</h5>
    </div>
</body>

<script type="text/javascript">
    Vue.config.performance = false;
    const vm = new Vue({
        el:'#root',
        data:{
            a:false,
            opacity:1,
        },
        methods:{

        },
        // 完成模板解析，并把初始真实DOM放入页面后调用
        mounted() {
            console.log("mounted...")
            setInterval(()=>{
                vm.opacity -= 0.01
                if(vm.opacity <= 0) {
                    vm.opacity = 1
                }
            },16)
        },
        
    })

    // 通过外部定时器实现
    /* setInterval(()=>{
        vm.opacity -= 0.01
        if(vm.opacity <= 0) {
            vm.opacity = 1
        }
    },16) */

</script>
</html>